<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/forgetPassword.css"/>
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style type="text/css">
			.mui-content{margin-top: 45px;}
		</style>
	</head>

	<body>
		<div id="headerNav"></div>
		<div class="mui-content">
		    <div class="mui-input-group" id="checkInputVal">
			    <div class="mui-input-row">
			        <input type="text" class="mui-input" placeholder="请输入您的手机号" id="phoneTest" style="width: 70%;">
			        <a href="javascript:;" id="get_code" disabled="true" style="color: #5763FF;" >获取验证码</a>
			    </div>
			    <div class="mui-input-row">
			        <input type="text" class="mui-input-clear" placeholder="请输入验证码" id="yzm">
			    </div>
			    <div class="mui-input-row">
			        <input type="password" class="mui-input-clear" placeholder="请设置新的支付密码(6位数字)" id="new_pass">
			    </div>
			</div>
			<div class="mui-button-row" style="margin: 20px 0;">
				<button type="submit" class="mui-btn btnColor mui-col-sm-11 mui-col-xs-11 mui-of" id="btn">完成</button>
			</div>
		</div>
		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('#headerNav').load('header.html',function(){
			$('header h1').html('忘记支付密码');
		});
	</script>
	<script type="text/javascript">
		function setTime() {

			var time = 60;
			var setTime = setInterval(function() {
				if(time <= 1) {
					clearInterval(setTime);
					$("#get_code").html('获取验证码');
					return;
				}
				time--;
				$("#get_code").css({'width':'92px'})
				$("#get_code").html(time+'s');
			}, 1000);
		}
		//		获取验证码接口
		function yzm(){
			$("#get_code").click(function(){
				var phoneTest = $("#phoneTest").val();
				var new_pass = $('#new_pass').val();
				if(phoneTest==""){
					mui.alert('', '手机号不能为空');
				}else if(!(/^1[34578]\d{9}$/.test(phoneTest))){
					mui.alert('', '请输入正确的手机号');
				}else{
					
					$.ajax({
						type: "post",
						url: "http://mall.itcn99.com/i/index/baiwu_code",
						dataType: "jsonp",
						async: true,
						data: {
							"mobile":phoneTest,
						},
						success: function(data) {
							setTime();
							console.log(data);
							mui.alert('', '验证码发送成功');
						}
					})
				}
				
			})
		}	
		yzm();
		$("#btn").click(function(){
			var phoneTest = $("#phoneTest").val();
			var yzm = $("#yzm").val();
			var new_pass = $("#new_pass").val();
			if(phoneTest==""){
				mui.alert('', '手机号不能为空');
			}else if(!(/^1[34578]\d{9}$/.test(phoneTest))){
				mui.alert('', '请输入正确的手机号');
			}else if(!(/^\d{6}$/.test(new_pass))){
				mui.alert('', '密码只能是六位数字');
			}else if(yzm==''){
				mui.alert('', '验证码不能为空');
			}else{
				$.ajax({
					type: "post",
					url: "http://mall.itcn99.com/i/index/edit_password",
					dataType: "jsonp",
					async: true,
					data: {
						"mobile":phoneTest,
						"ucode":yzm,
						"pay_pass":new_pass,
					},
					success: function(data) {
						console.log(data);
						var states=data.state;
//						state的值：0是新密码不能为空，1是修改成功，2是您已更改请勿重复操作，3是验证码输入错误，4是用户不存在
						if(states==0){
							mui.alert('', '新密码不能为空');
						}
						if(states==1){
							mui.alert('', '密码修改成功',function(){
								window.location.href="payment.html"
							});
						}
						if(states==2){
							mui.alert('', '您已更改请勿重复操作');
						}
						if(states==3){
							mui.alert('', '验证码输入错误');
						}
						if(states==4){
							mui.alert('', '用户不存在');
						}
					}
				})
			}
			
		})
	</script>
</html>